<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">
		<h:outputText value=":: TITLE ::" image="Bibliotecas/Imágenes/ctp.jpg" />

	</ui:insert></title>
	<div class="alert alert-success">
	<h:panelGrid columns="2">
<h:graphicImage url="/img/LogoCTP.png" style="height: 145px; width: 200px; "/><h:panelGroup>
<h2><h:outputText value="CENTRO TECNOLOGICO PROFESIONAL"/></h2>	
</h:panelGroup>
</h:panelGrid>
</div>
<style type="text/css">
body {
	/*padding-top: 60px;*/
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

@media ( max-width : 980px) { /* Enable use of floated navbar text */
	.navbar-text.pull-right {
		float: none;
		padding-left: 5px;
		padding-right: 5px;
	}
}
</style>



<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<link href="#{request.contextPath}/css/bootstrap.min.css"
	rel="stylesheet" media="screen"></link>
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"></link>
<link href="#{request.contextPath}/css/datepicker.css" rel="stylesheet"
	media="screen"></link>
</head>
<body>


	<div class="tabbable">
		<!-- Only required for left/right tabs -->
		<ul class="nav nav-pills nav-justified">
			<li class="active"><a href="#tab1" data-toggle="tab">Gestión de Alumnos</a></li>
			<li><a href="#tab2" data-toggle="tab">Gestión de Pagos</a></li>
			<li><a href="#tab3" data-toggle="tab">Planilla</a></li>
			<li><a href="../../../index.jsp" data-toggle="tab">Salir</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				<div class="container-fluid">
					<div class="row-fluid">
						<div class="span3">
							<h:form>
								<div class="well sidebar-nav">
									<ul class="nav nav-list">
										<li class="nav-header">Menu</li>
										<li class="_active"><h:commandLink
												action="ingresarAlumno" value="Matricular Alumno" /></li>
										<li><h:commandLink action="actualizarAlumno"
												value="Actualizar Alumno" /></li>
										<li><h:commandLink action="alumnosMoraLista"
												value="Alumnos en Mora" /></li>
									</ul>
								</div>
								<!--/.well -->
							</h:form>
						</div>
						<!--/span-->
						<div class="span9">
							<div class="hero-unit">
								<ui:insert name="content" />
							</div>
						</div>
						<!--/span-->
					</div>
					<!--/row-->
				</div>
			</div>
			<div class="tab-pane" id="tab2">
				<div class="container-fluid">
					<div class="row-fluid">
						<div class="span3">
							<h:form>
								<div class="well sidebar-nav">
									<ul class="nav nav-list">
										<li class="nav-header">Menu</li>
										<li class="_active"><h:commandLink action="ingresarPago"
												value="Ingresar Pago" /></li>
										<li><h:commandLink action="actualizarPago"
												value="Actualizar Pago" /></li>
										<li><h:commandLink action="eliminarPago"
												value="Eliminar Pago" /></li>
										<li><h:commandLink action="DiarioLista"
												value="Resumen de Pagos" /></li>
									</ul>
								</div>
								<!--/.well -->
							</h:form>
						</div>
						<!--/span-->
						<div class="span9">
							<div class="hero-unit">
								<ui:insert name="content" />
							</div>
						</div>
						<!--/span-->
					</div>
					<!--/row-->
				</div>
			</div>
		</div>
	</div>



	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="#{request.contextPath}/js/bootstrap.min.js"></script>
	<script src="#{request.contextPath}/js/bootstrap-datepicker.js"></script>
	<script type="text/javascript">
		$('.datepicker').datepicker();
	</script>

	<script src="#{request.contextPath}/js/jquery-1.10.2.min.js"></script>
	<script src="#{request.contextPath}/js/jquery.maskedinput.js"></script>
	<script src="#{request.contextPath}/js/validaciones.js"
		charset="ISO-8859-1"></script>

	<!-- JAVASCRIPT PARA ENMASCARAR CARNET, DUI Y NIT -->
	<!-- Es un problema bien conocido integrar JSF y jQuery – los dos puntos “:” estan reservados 
 para un selector de jQuery. Para usar el selector jQuery para obtener el id en JSF,
 necesitas “escapar” los dos puntos poniendo dos barras invertidas en frente de este: -->
<script>
	//CARNET
	jQuery(function($){
   		$("#j_id15\\:carnetAlumno").mask("aa99999");
	});
	//NIT
	jQuery(function($){
   		$("#j_id15\\:nitAlumno").mask("9999-999999-999-9");
	});
	//DUI
	jQuery(function($){
   		$("#j_id15\\:duiAlumno").mask("99999999-9");
	});
	//MASCARA CODIGO DE EMPLEADO CONTROL DE ASISTENCIA
	jQuery(function($){
   		$("#j_id15\\:codigoEmpleado").mask("aa9999");
	});
	
	jQuery("#j_id15\\:carnetAlumno").blur(function(){
	
	var a=jQuery("#j_id15\\:carnetAlumno").value("aqui debe aparecer");
	
	//elimina el otro alert a ver si da.
	
	});
	
	</script>	
<!-- FIN DEL ENMASCARAMIENTO NIT Y DUI -->	
    

</body>
</html>
